@use 'src/styles/abstracts' as *;

.StatisticsBar {
  position: relative;
  background-color: $pico-2;
  border-radius: $border-radius-sm;
  &__item {
    display: inline-flex;
    height: 100%;
    position: absolute;
    transition: all 0.18s ease-out;
    &:first-child {
      border-top-left-radius: $border-radius-sm;
      border-bottom-left-radius: $border-radius-sm;
    }
    &:last-child {
      border-top-right-radius: $border-radius-sm;
      border-bottom-right-radius: $border-radius-sm;
    }
    &.highlighted {
      z-index: 1;
      height: calc(100% + 2px);
      margin-top: -1px;
      box-shadow: 0 0 0 2px white;
    }
  }
}
